<template>
  <div class="feedback_container">
      <!-- 导航栏 -->
    <van-nav-bar
    title="我要反馈"
    left-text="返回"
    left-arrow
    @click-left='$router.back()'
    />
    <van-notice-bar
    left-icon="volume-o"
    text="做这个不容易，请您谨慎反馈哇，呜呜呜呜。。。。。"
    color="#1989fa" background="#ecf9ff"
    />
    <!-- 反馈 -->
    <van-panel>
  <div>
    <van-form>
      <van-field
      v-model="feedback.title"
      required
      label="问题"
      placeholder="反馈的问题"
      :rules="rulesTitle"

    />
    <van-field
      v-model="feedback.message"
      rows="2"
      autosize
      required
      type="textarea"
      maxlength="50"
      placeholder="请输入反馈内容"
      show-word-limit
      :rules="rulesMessage"
    />
    </van-form>
  </div>
  <template #footer>
    <van-button size="small" @click="reset">重置</van-button>
    <van-button size="small" type="danger" @click="isOK" native-type="submit">反馈</van-button>
  </template>
</van-panel>
  </div>
</template>

<script>
export default {
  name: 'feedback',
  data () {
    return {
      feedback: {
        title: '',
        message: ''
      },
      rulesTitle: [
        { required: true, message: '问题不能为空！' }],
      rulesMessage: [
        { required: true, message: '反馈内容不能为空！' },
        { pattern: /^.{1,50}$/, message: '内容字数不能超过50！' }]
    }
  },
  methods: {
    async isOK () {
      await this.$refs.feedbackForm.validate()
      this.$toast.success('反馈成功')
      this.$router.back()
    },
    reset () {
      this.feedback.title = ''
      this.feedback.message = ''
    }
  }

}
</script>

<style scoped lang="less">
.van-panel__footer{
text-align: center;
button{
    margin: 0 25px;
    padding: 0 30px;
}
}

</style>
